<template>
    <div>
        <div>
            <van-nav-bar fixed title="提交订单"  @click-left="onClickLeft" style="background-color: #FFDD01;">
                <template #left>
                    <van-icon name="arrow-left"  color="#000000"/>
                </template>
            </van-nav-bar>
        </div>
        <div class="div">
            <van-cell-group inset>
                <van-tabs v-model="active" color="#ffe101">
                    <!-- 第一个标签 -->
                    <van-tab >

                        <van-cell is-link to="/orderAddress" v-if="isAddress">
                            <!-- 使用 title 插槽来自定义标题 -->
                            <template  #title >
                                <span class="custom-title span">选择收货地址</span>
                            </template>
                        </van-cell>

                        <van-cell is-link v-else to="/orderAddress">
                            <!-- 使用 title 插槽来自定义标题 -->
                            <template #title>
                                <span class="custom-title ">{{address.addressDetail}}</span>
                            </template>
                            <template #label>
                                <span class="custom-title ">{{address.name}}</span>&nbsp;
                                <span class="custom-title ">{{address.tel}}</span>
                            </template>
                        </van-cell>
                        

                        <van-cell label="描述信息" is-link>
                            <!-- 使用 title 插槽来自定义标题 -->
                            <template #title>
                                <span class="custom-title span2">立即送出</span>
                            </template>
                            <template>
                                <span class="custom-title span3">16:59-17:14送达</span>
                            </template>
                            <template #label>
                                <span class="custom-title span4">因配送订单较多,送达时间可能波动</span>
                            </template>
                        </van-cell>
                        <template #title><span class="span7">外卖配送</span></template>
                    </van-tab>
                    <!-- 第二个标签 -->
                    <van-tab>
                        <van-cell class="ll">
                            <!-- 使用 title 插槽来自定义标题 -->
                            <template #title>
                                <span class="custom-title span9">
                                    珠海市香洲区香悦路4号首层
                                </span>
                            </template>
                            <template>
                                <span class="custom-title">
                                    距离 12.km
                                    <van-icon name="location-o" />
                                </span>
                            </template>
                            <template #label>
                               <div class="clearfix">
                                    <div class="box-juli">
                                        <span class="custom-title span10">
                                            自取时间
                                        </span>
                                        <span class="span11" >
                                            19:34
                                        </span>
                                    </div>
                                    <div style="float: left;">
                                        <span class="custom-title span10">
                                            预留电话
                                        </span>
                                        <br>
                                        <span class="span11" >
                                           +86 14777568052
                                        </span>
                                    </div>
                               </div>
                            </template>
                            
                        </van-cell>
                        <template #title><span class="span7">到店自取</span></template>
                    </van-tab>
                </van-tabs>
               
            </van-cell-group>

            <van-cell-group style="margin-top: 5px;" inset>
                <van-cell >
                    <!-- 使用 title 插槽来自定义标题 -->
                    <template #title>
                        <span class="custom-title span2">支付方式</span>
                    </template>
                    <template>
                        <span class="custom-title span5">在线支付</span>
                    </template>
                </van-cell>
            </van-cell-group>

            <van-cell-group style="margin-top: 5px;" inset>
                <van-cell class="van-cell__value2">
                    <!-- 使用 title 商家名称 -->
                    <template #title>
                        <span class="custom-title span6">
                            {{ shop.shopName }}
                        </span>
                    </template>
                    <template>
                        <div v-if="active == 0">
                        <van-tag plain type="primary" 
                                color="#a8a8a8"
                                style="margin-right: 5px;">
                            <span class="span8">美团快送</span>
                        </van-tag>
                        <van-icon name="question-o" />
                        </div>
                        <van-tag plain type="primary" 
                            v-else
                            color="#1cdd15"
                            style="margin-right: 5px;">
                            <span class="span8">支持自取</span>
                        </van-tag>
                        
                    </template>
                </van-cell>
                <!-- 订单商品 -->
                <van-cell   v-for="s in shoppingCart"
                            :key="s.shoppingId">
                    <template #icon>
                        <van-icon :name="getImagePath(s.itemPicture)" 
                        size="75"
                        class="search-icon" 
                        style="margin-right: 10px;"
                        />
                    </template>
                    <!-- 商品及内容 -->
                    <template #title>
                        <span class="custom-title">{{s.itemName}}</span>
                        <span class="custom-title"> ￥{{s.itemPrice}}</span>
                    </template>
                    <template #label>
                        <span   v-for="a in s.shoppingCartDetails"
                            :key="a.id"  
                            class="pingfen-title">
                            {{a.selectedValue}}、
                        </span>
                        <br>
                        <span>X{{s.itemNum}}</span>
                    </template>
                </van-cell>

                <!-- 选项 -->
                <van-cell>
                    <template #title>
                        <span class="custom-title span12">打包费</span>
                        <br>
                        <span class="custom-title span12">用户配送费</span>
                        <br>
                        <van-col>
                            <van-icon size="25" :name="require('../../assets/img/红包.png')" />
                        </van-col>
                        <van-col>
                            <div >
                            <span class="custom-title span12">美团红包</span>
                            </div>
                        </van-col>
                    </template>
                    <template >
                        <span class="custom-title span12">￥1.2</span>
                        <br>
                        <span class="custom-title span12">￥2.2</span>
                        <br>
                        <span class="span13">暂无可用</span>
                        <van-icon name="arrow" />
                    </template>
                </van-cell>
                <van-cell>
                    <template #title>
                        <span class="custom-title span14">优惠规则</span>
                    </template>
                    <template #default>
                        <span class="custom-title span12">
                            已优惠<span class="span17">￥2 </span> 小计￥{{total}}
                        </span>
                    </template>
                </van-cell>
            </van-cell-group>

            <van-cell-group style="margin-top: 15px;height: 150px;" inset>
                <van-cell>
                    <!-- 使用 title 插槽来自定义标题 -->
                    <template #title>
                        <span class="custom-title span2">备注</span>
                    </template>
                    <template>
                        <span class="custom-title span5">荐使用无接触配送</span>
                        <van-icon name="arrow" />
                    </template>
                </van-cell>
                <van-cell>
                    <!-- 使用 title 插槽来自定义标题 -->
                    <template #title>
                        <span class="custom-title span2">餐具数量</span>
                    </template>
                    <template>
                        <span class="custom-title span5">商家按餐量提供</span>
                        <van-icon name="arrow" />
                    </template>
                </van-cell>
            </van-cell-group>
            <van-submit-bar :price="price" button-text="提交订单" @submit="onSubmit">
                <span class="span16">为您节省￥4.5</span>
            </van-submit-bar>
        </div>
    </div>
</template>

<script>
import axios from 'axios';
export default {
    name:'SubmitOrder',
    props:["id"],
    data() {
        return {
            baseUrl: 'http://localhost:8081/images/item/',
            active:0,
            // 商家对象
            shop:{},
            // 购物车
            shoppingCart:[],
           // token密钥
            token:'Bearer ' + localStorage.getItem("token"),
            // 用户地址对象
            address:{},
            // 
            item:this.$store.state.address,
            
            price:0,

            aa:{},
            // 用户是否有地址
            isAddress:false
        }
    },
    computed:{
        total(){
            let total = 0;
            this.shoppingCart.forEach(item => {
                    total += (item.itemPrice * item.itemNum)
                });
            this.price = total * 100
            return total.toFixed(2);
        }
    },
    methods:{
         //拼接地址
         getImagePath(imgName){
            return `${this.baseUrl}${imgName}`;
        },
        onClickLeft(){
            this.$router.push({path:"/shop/"+this.id})
        },
        onSubmit(){
            console.log("id:"+this.$store.state.uid);
            console.log(this.shop);
            console.log(this.shoppingCart);
            console.log(this.address);
            console.log(this.total);
            console.log(JSON.stringify(this.shoppingCart));
            // window.location.href = `http://localhost:9090/api/alipay/pay`
            this.aa = {
                    uid:this.$store.state.uid,
                    shopId:this.shop.shopId,
                    riderId:0,
                    addressId:this.address.id,
                    orderStatus:0,
                    totalPrice:this.total,
                    orderType:"WaiMai",
                    orderRemarks:null,
                    orderDetails:JSON.stringify(this.shoppingCart),
                }
                console.log(this.aa);
            axios.post("http://localhost:9090/api/Order/ConfirmPayment",{
                    uid:this.$store.state.uid,
                    shopId:this.shop.shopId,
                    riderId:0,
                    addressId:this.address.id,
                    orderStatus:0,
                    totalPrice:this.total,
                    orderType:"WaiMai",
                    orderRemarks:null,
                    orderDetails:JSON.stringify(this.shoppingCart),
                })        
                .then(res => {    
                    console.log(res.data);
                    if (res.data.code == 200) {
                        window.location.href = `http://localhost:9090/api/alipay/payApp?total=${this.total}`
                    }
                })        
                .catch(err => {            
                    console.log(err.data)        
                }) 

        },
        getAddress(uid,id,isDefault){
            if (id == null) {
                axios.get("http://localhost:9090/api/getAddressById",{
                    params:{
                        uid,
                        isDefault
                    }
                })        
                .then(res => {    
                    console.log(res.data.data);
                    res.data.data == undefined ? this.isAddress = true : this.isAddress = false
                    this.address = res.data.data
                })        
                .catch(err => {            
                    console.log(err.data)        
                })    
                return 
            }
            axios.get("http://localhost:9090/api/getAddressById",{
                params:{
                    uid,
                    id,
                    isDefault
                }
            })        
            .then(res => {    
                console.log(res.data.data);
                this.address = res.data.data
            })        
            .catch(err => {            
                console.log(err.data)        
            }) 
        },
        queryShop(){
            axios.get("http://localhost:9090/api/shop/getListShopAndItemAndItemType",{
                params:{
                    shopId:this.id,
                }
            })        
            .then(res => {    
                console.log(res.data.data);
                this.shop = res.data.data.shop;
            })        
            .catch(err => {            
                console.log(err.data)        
            }) 
        },
        queryShopPing(){
            let that = this
            //1.发起axios请求添加至购物车
            axios.defaults.headers['Authorization'] = that.token;

            axios.get('http://localhost:9090/api/user/ShopPing/query', {
                    params:{
                        uId:this.$store.state.uid,
                        shopId:this.id,
                    }
                })
            .then(response => {
                // 处理响应数据
                this.shoppingCart = response.data.data;
                this.shoppingCart.forEach(item => {
                item.shoppingCartDetails = JSON.parse(item.shoppingCartDetails);
                    //console.log(item.itemPrice + item.itemPrice);
                });
                console.log(this.shoppingCart);
            })
            .catch(error => {
                // 处理错误
                console.error(error);
            });

        },
    },
    created(){
        this.queryShop();
        this.queryShopPing();
        if (this.$store.state.address === null) {
            this.getAddress(this.$store.state.uid,null,1)
        } else{
            this.getAddress(this.item.uid,this.item.id,this.item.isDefault)
        }
        
    }
}
</script>

<style scoped>

.div{
    margin-top: 45px;
    width: 100%;
    height: 550px;
    background: -webkit-linear-gradient(
        bottom,white,#d8cf8d,#ffe101
    );
}
.span{
    font-weight: bold;
    font-size: 20px;
    color: #ff9101;
}
.span2{
    font-weight: bold;
    font-size: 15px;
}
.span3{
    color: #ff9101;
}
.span4{
    color: #ff9101;
}
.span5{
    color: #000000;
}
.span6{
    font-size: 14px;
}
.van-cell__label {
    width: 200px;
}
.span7{
    font-size: 18px;
    font-weight: bold;
}
.span8{
    font-weight: bold;
}
.span9{
    font-weight: bold;
    font-size: 15px;
    color: #000000;
}

.span10{
    font-size: 14px;
}
.span11{
    font-size: 13px;
    font-weight: bold;
    color: #000000;
}
.box-juli{
    border-right: 1px solid rgb(115, 115, 115);
    width: 70px;
    float: left;
    margin-right: 10px;
}
.span12{
    font-size: 15px;
    color: #000000;
}
.span13{
    font-size: 15px;
    color: #9f9e9e;
}
.span14{
    font-size: 13px;
    color: #9f9e9e;
}
.van-cell-group--inset {
    border-top: 1px solid rgb(204 202 202);
    border-bottom: 1px solid rgb(204 202 202);
}
.van-submit-bar {
    border-top: 1px solid rgb(227 225 225);
}
.span15{
    font-size: 15px;
    color: #ff8a05;
}
.span16{
    font-size: 15px;
    font-weight: bold;
    color: #ff8a05;
}
.span17{
    color: #ff8a05;
}
</style>
